<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历</title>
    <style>
        .outer {
            border: 1px solid orange;
            width: 80%;
            height: 550px;
            margin: auto;
        }
        .top {
            /* border: 1px solid #000; */
            text-align: center;
            padding-top: 20px;
        }
        #tb1 {
            margin-top: 10px;
        }
        /* table在div里面,希望table在该div内部居中 */
        .cal {
            margin: auto;
        }
        .cal,td {
            border: 1px solid green;
            border-collapse: collapse;
        }
        td {
            height: 30px;
            width: 60px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="top">
            <input type="text" id="year" placeholder="请输入年份">
            <input type="text" id="month" placeholder="请输入月份">
            <input type="button" id="search_btn" value="search">
        </div>
        <div id="tb1">
            
        </div>
    </div>
    <script>
        //DOM -获取按钮对象
        let btn = document.getElementById("search_btn");
        //获取div对象
        let div = document.getElementById("tb1");

        btn.onclick=function() {
            //js操作属性
            //定义一个字符串
            // let str = "<table class='cal'>";
            // str += "    <tr>";
            // str += "        <td>日</td>"
            // str += "        <td>一</td>"
            // str += "        <td>二</td>"
            // str += "        <td>三</td>"
            // str += "        <td>四</td>"
            // str += "        <td>五</td>"
            // str += "        <td>六</td>"
            // str += "    </tr>";
            let str = `<table class='cal'>
                <tr>
                    <td>日</td>
                    <td>一</td>
                    <td>二</td>
                    <td>三</td>
                    <td>四</td>
                    <td>五</td>
                    <td>六</td>
                </tr>`;

            //获取文本框的内容
            //string
            let year = document.getElementById("year").value;
            let month =  document.getElementById("month").value;
            
            //最大天数
            let max = get_max_day(year,month);
            let day = get_day_week(year,month,1);

            let date = new Date().getDate();

            str += "    <tr>"
            
            let count = 0;

            for(let i=0;i<day;i++){
                str += "<td></td>";
                count++;
            }

            for(let i=0;i<max;i++){
                if(i+1 == date) {
                    // str += `<td style='background-color:green;color:white'>${i+1}</td>`
                    str += "<td style='background-color:green;color:white'>"+(i+1)+"</td>"
                } else {
                    // str += `<td>${i+1}</td>`;
                    str += "<td>"+(i+1)+"</td>"
                }
                

                count++;
                
                if(count%7==0) {
                    str += `</tr>
                    <tr>`;
                    count = 0;
                }
            }

            for(let i=count;i<7;i++) {
                str += "        <td></td>"
            }

            str += `    </tr>
            </table>`;

            div.innerHTML = str;
        }

        //某年某月最大天数
        function get_max_day(year,month) {
            let max = -1;
            //string->number
            month = parseInt(month);
            switch(month) {
                case 4:
                case 6:
                case 9:
                case 11:
                    max = 30;
                    break;
                case 2:
                    max = is_leap_year(year)?29:28;
                    break;
                default:
                    max = 31;
                    break;
            }
            return max;
        }

        //某年某月某日是周几
        function get_day_week(year,month,date) {
            let d = new Date(year,month-1,date);
            return d.getDay();
        }

        //判断某年是否为闰年
        function is_leap_year(year) {
            return (year%400==0) || (year%4==0 && year%100 != 0);
        }
    </script>
</body>
</html>